<template>
  <div class="app-container flow-css" ref="refFlowForm">
    <div class="my-define-dialog-title">
      {{reqForm.dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-row>
      <el-col :span="2" style="width: 150px;">
        <el-tabs tab-position="left" v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane name="99" label="推荐流程"></el-tab-pane>
          <el-tab-pane name="1" label="自动通知"></el-tab-pane>
          <el-tab-pane name="2" label="自动更新"></el-tab-pane>
          <el-tab-pane name="3" label="定时任务"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="20" style="width: calc(100% - 150px)">
        <div class="flow-css1">
          <div class="flow-css2">
            推荐流程
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="flow-css3" @click="doAdd()">
                <i class="el-icon-plus"></i>
                <div class="flow-css4">创建自定义流程</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="flow-css1" v-for="(item, index) in list" :key="index">
          <div class="flow-css2">
            {{item.title}}
          </div>
          <el-row :gutter="20">
            <el-col style="position: relative;" :span="12" v-for="(item2,index2) in item.children" :key="index2">
              <div class="flow-css3" @click="doEdit(item2.id)">
                <div class="flow-css5">
                  {{item2.name}}
                </div>
                <div class="flow-css6">
                  {{item2.summary}}
                </div>
              </div>
              <span class="flow-css7">
                <el-switch @change="(val)=>handleActive(val,item2)" v-model="item2.isActive">
                </el-switch>
                <el-link @click="doRemove(item2)" type="danger"> <i style="font-size: 18px;"
                    class="el-icon-delete"></i></el-link>
              </span>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-dialog width="80%" :visible.sync="relate.showPop" :show-close="false" custom-class="my-relate-table"
      append-to-body :close-on-click-modal="false">
      <div ref="refPopDiv">
        <flowEdit ref="relateTable" v-if="relate.showPop" :sceneId="relate.relateSceneId"
          :sceneType="relate.relateSceneType" :defineSceneId="relate.relateDefineSceneId"
          :dialogTitle="relate.relateTitle" :relateId="relate.relateId" :flowType="relate.flowType">
        </flowEdit>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import flowEdit from "@/views/flow/edit"
  import {
    getList,
    activeFlow,
    deleteFlow
  } from '@/api/system/flow'
  export default {
    name: 'flow-index',
    components: {
      flowEdit
    },
    props: {
      reqForm: {
        type: Object,
        default: () => ({
          formData: {},
          dialogTitle: '',
          uploadFormData: {
            required: false,
            uploadFile: false,
            uploadFolder: 'Service',
            fileList: [],
            listType: 'picture-card'
          },
          denyEdit: false,
          recordData: []
        })
      },
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        activeTab: '1',
        list: [],
        relate: {
          relateSceneType: 0,
          relateSceneId: 0,
          relateDefineSceneId: 0,
          relateTitle: '',
          relateId: 0,
          showPop: false,
          flowType: 0
        }
      }
    },
    created() {
      this.list = []
      this.getData();
    },
    methods: {
      addClickEvent() {
        document.addEventListener('mousedown', this.handleClickEvent, false)
      },
      removeClickEvent() {
        document.removeEventListener('mousedown', this.handleClickEvent, false)
      },
      handleClickEvent(e) {
        let isIn = false
        let colDropMenus = document.querySelectorAll('.el-popper')
        colDropMenus.forEach((colDropMenu) => {
          if (colDropMenu.contains(e.target)) {
            isIn = true
            return false
          }
        })
        let elMsgBox = document.querySelectorAll('.el-message-box')
        elMsgBox.forEach((elMsg) => {
          if (elMsg.contains(e.target)) {
            isIn = true
            return false
          }
        })
        if (this.relate.showPop && !isIn) {
          if (!this.$refs.refPopDiv.contains(e.target)) {
            this.submitForm()
          }
        }
      },
      handleTabClick() {
        this.getData()
      },
      getData() {
        getList({
          flowType: this.activeTab
        }).then(res => {
          if (res.status) {
            this.list = res.outputData
          }
        })
      },
      submitForm() {
        if (this.relate.showPop) {
          this.submitSaveRelate()
          return
        }
        this.cancel(false)
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", reload)
      },
      doClosePop(reload) {
        this.relate.showPop = false
      },
      doAdd() {
        this.addClickEvent()
        this.relate.relateSceneType = this.sceneType
        this.relate.relateSceneId = this.sceneId
        this.relate.relateDefineSceneId = this.defineSceneId
        this.relate.relateTitle = '流程'
        this.relate.relateId = 0
        this.relate.showPop = true
        this.relate.flowType = Number(this.activeTab)
      },
      doEdit(Id) {
        this.addClickEvent()
        this.relate.relateSceneType = this.sceneType
        this.relate.relateSceneId = this.sceneId
        this.relate.relateDefineSceneId = this.defineSceneId
        this.relate.relateTitle = '流程'
        this.relate.relateId = Id
        this.relate.showPop = true
        this.relate.flowType = Number(this.activeTab)
      },
      submitSaveRelate() {
        this.$refs.relateTable.submitRelate()
      },
      handleActive(val, item) {
        activeFlow({
          Id: item.id,
          isActive: val ? 1 : 0
        }).then(res => {
          if (res.status) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getData();
          }
        })
      },
      doRemove(item) {
        this.$confirm(
            '是否确认删除选中的流程',
            '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
          .then(() => {
            deleteFlow({
              Id: item.id
            }).then(res => {
              if (res.status) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                })
                this.getData();
              }
            })
          })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .flow-css {
    .flow-css1 {
      padding: 20px;
    }

    .flow-css2 {
      font-weight: bold;
      margin-bottom: 5px;
    }

    .flow-css3 {
      border: solid 1px #ccc;
      border-radius: 5px;
      height: 100px;
      text-align: center;
      margin-bottom: 10px;
      cursor: pointer;

      i {
        font-size: 30px;
        color: #409EFF;
        margin-top: 20px;
      }

      .flow-css4 {
        font-size: 15px;
        margin-top: 5px;
      }
    }

    .flow-css5 {
      text-align: left;
      padding: 15px 0 0 10px;
      position: relative;
    }

    .flow-css7 {
      position: absolute;
      right: 20px;
      top: 15px;
    }

    .flow-css6 {
      text-align: left;
      padding: 15px 5px 0 10px;
      font-size: 13px;
    }
  }
</style>
